var carouselIndex = 0,
    textArr,
    parentHeight = null,
    childHeight = null,
    stepNum = 0,
    waitCountNum = 0,
    offsetY=50,
    timeSpace=15,///每条通知切换间隔
    HZ=myexplorer(),///浏览器刷新频率  在 比如browser.js里面
    waitTimeTimer=null,
    animation,
    titleWidth,
    moveTimer=null;
window.onresize = function(){
    getRem(100,600);
};
window.onload = function(){
    getRem(100,600);
    ajax();
};
function ajax(){
    $.ajax({
        type: "get",
        url: "preview/json/testData.json",
        dataType: "json",
        data: {},
        success: function (json) {
            //清空数组
            textArr = json.result;
            textMove();
            console.log("info ---->> 历史上的今天数据初始化了...");
        }
    });
}
///内容滚动函数
function textMove(){
    if(!!window.moveTimer)	cancelAnimationFrame(window.moveTimer);
    if (carouselIndex >= textArr.length) carouselIndex = 0;
    //将当前内容赋值
    $('.contentTitle').html(textArr[carouselIndex].title);
    $('.contentText').html('<div>'+ textArr[carouselIndex].content +'</div>');
    /////2018.11.29添加代码 标题加滚动
    ////如果标题实际长度大于盒子宽度了  就滚动显示
    titleWidth=$('.contentTitle').width();////标题的长度
    console.log(titleWidth,$('.pubBox').width());
    if(titleWidth>$('.pubBox').width()){
        ///如果标题滚动的时间大于设置的静止间隔时间 就当标题滚动完成之后多加5秒再切换下一条
        if(titleWidth/10>timeSpace){
            timeSpace=titleWidth/60;
            console.log(timeSpace);
        }
        $('.contentTitle').css({
            "left":"0"
        });
        animation=document.getElementById("contentTitle").animate([
            // keyframes
            { transform: 'translate3d(0,0,0)',webkitTransform: 'translate3d(0,0,0)'},
            { transform: 'translate3d(-'+titleWidth+'px,0,0)',webkitTransform:'translate3d(-'+titleWidth+'px,0,0)'}
        ], {
            // timing options
            duration:titleWidth/60*1000,///标题滚动时间
            iterations: 1,///循环执行动画，执行次数
            fill: "none"
////            delay: 10000////延迟执行动画
        });
        console.log(animation);
    }else{
        //$('.contentTitle').css({left:"50%"});
        $('.contentTitle').css({
            //"left":($('.pubBox').width()-titleWidth)/2+"px",
            ////"marginLeft":-$('.pubBox').innerWidth()/2,
            "left":"50%",
            "-webkit-transform" : "translate3d(-50%,0,0)",
            "transform" : "translate3d(-50%,0,0)"
        });


        timeSpace=15;
    }
    //animation.addEventListener("finish", function() {
    //    $('.contentTitle').css({
    //        //"left":($('.pubBox').width()-titleWidth)/2+"px",
    //        ////"marginLeft":-$('.pubBox').innerWidth()/2,
    //        "left":"50%",
    //        "-webkit-transform" : "translate3d(-50%,0,0)",
    //        "transform" : "translate3d(-50%,0,0)"
    //    });
    //}, false);
    /////2018.11.29添加代码结束

    ////下面是判断正文滚动
    parentHeight = $('.contentText').height();
    childHeight = $('.contentText>div').height();
    if (childHeight > parentHeight) {
        $('.contentText>div').css({
            "top" : offsetY,
            "-webkit-transform" : "translate3d(0,-"+ stepNum +"px,0)",
            "transform" : "translate3d(0,-"+ stepNum +"px,0)"
        });
        stepNum += 0.2;
        if(stepNum >= (childHeight+offsetY)) {
            stepNum = 0;
            carouselIndex++;
            if(animation){
                animation.pause();///一条内容切换完成之后就停止标题动画

            }
        }
        moveTimer = requestAnimationFrame(textMove);
    } else {
        $('.contentText>div').css({top:0});
        $('.contentText>div').css({
            "-webkit-transform" : "translate3d(0,0,0)",
            "transform" : "translate3d(0,0,0)"
        });
        waitTime();
    }
}
///多条切换函数
function waitTime(){
    if(!!window.waitTimeTimer)	cancelAnimationFrame(window.waitTimeTimer);
    waitCountNum++;
    if(waitCountNum >= (timeSpace*HZ)){//不需要滚动的内容等待10秒钟
        waitCountNum = 0;
        if(animation){
            animation.pause();///一条内容切换完成之后就停止标题动画
        }
        carouselIndex++;
        if(!!window.moveTimer)	cancelAnimationFrame(window.moveTimer);
        textMove();
    }else {
        window.waitTimeTimer = requestAnimationFrame(waitTime);
    }
}

